<style lang="stylus" scoped>
  .carbtn
    position absolute
    bottom 0
    right 0
    display flex
    .num
      font-size 10px
      color rgb(147,153,159)
      line-height 24px;
      width 24px
      text-align center
    i
      font-size 24px
      color rgb(0,160,220)
      line-height 24px
</style>

<template>
  <div>
    <div class="carbtn">
      <span @click.stop="prev" v-show="food.num" class="btn prev"><i class="iconfont icon-jian"></i></span>
      <span v-show="food.num" class="num">{{food.num}}</span>
      <span @click.stop="add" class="btn add" ref="addbtn"><i class="iconfont icon-jia"></i></span>
    </div>
  </div>
</template>

<script>
export default {
  props:{
    food:{
      type:Object
    }
  },
  methods:{
    add() {
      if(!this.food.num) {
        this.$set(this.food,'num',1)
      }else{
        this.food.num++
      }
      let X = this.$refs.addbtn.getBoundingClientRect().x - 30
      let Y = window.innerHeight - this.$refs.addbtn.getBoundingClientRect().y - 20
      this.$parent.$parent.animate(X,Y)
    },
    prev() {
      this.food.num--
    },
  }
}
</script>
